<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>login</title>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>

    <link type="text/css" href="css/login.css" rel="stylesheet">
    <SCRIPT language = "JavaScript">
        function checkUserName(){    //验证用户名
            var fname = document.myform.username.value;
            var reg=/^[0-9a-zA-Z]/;
            if(fname.length != 0){
                for(i=0;i<fname.length;i++){
                    if(!reg.test(fname)){
                        alert("只能输入字母或数字");
                        return false;}
                }
                if(fname.length<4||fname.length>16){
                    alert("只能输入4-16个字符")
                    return false;
                }
            }
            else{
                alert("请输入用户名");
                document.myform.username.focus();
                return false
            }
            return true;
        }

        function passCheck(){ //验证密码
            var userpass = document.myform.password.value;
            if(userpass == ""){
                alert("未输入密码 \n" + "请输入密码");
                document.myform.password.focus();
                return false;   }
            if(userpass.length < 6||userpass.length>12){
                alert("密码必须在 6-12 个字符。\n");
                return false;   }
            return true;
        }

        function validateform(){
            if(checkUserName()&&passCheck( ))
                return true;
            else
                return false;
        }


        function ddLogin(){
            console.log("login start ")
            validateform();
            // 登录名 密码
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            console.log(username ,  password)
            // 两种登录方式 1.oauth 2.JWT
            $.ajax({
                type: "POST",
                // url: "/oauth/token",
                url : "/access/auth/login",
                data: {
                    client_id:'internet_plus',
                    client_secret:'internet_plus',
                    username:username,
                    password:password,
                    grant_type:'password'
                },
                headers:{
                    // application/json;charset=utf8
                    'Content-Type':'application/x-www-form-urlencoded',
                    // aW50ZXJuZXRfcGx1czppbnRlcm5ldF9wbHVz clientScret 未加密
                    // aW50ZXJuZXRfcGx1czowRUM3ODdCOTI0MTY4NjdDRDUwMzlENkNGRDQ3NEIwRA== clientScret加密
                    'Authorization':'Basic aW50ZXJuZXRfcGx1czowRUM3ODdCOTI0MTY4NjdDRDUwMzlENkNGRDQ3NEIwRA=='
                },
                dataType: "json",
                success: function(data){
                    /**
                     * {
                    access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm92aWRlciI6Ikp1ZURyZWFtIiwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJhbGwiXSwiZXhwIjoxNjE1MjU5MjAxLCJhdXRob3JpdGllcyI6WyJhZG1pbiJdLCJqdGkiOiJmZGYxOGQ4My01MDViLTQyNGYtOGY0Zi02NWYzYzM4ZGU1ZTciLCJjbGllbnRfaWQiOiJpbnRlcm5ldF9wbHVzIn0.ZPWW34mnB9kYs8OTODPsAzKmwj7XQ4tbYVhp8NWCShw"
                    expires_in: 86399
                    jti: "fdf18d83-505b-424f-8f4f-65f3c38de5e7"
                    provider: "JueDream"
                    refresh_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm92aWRlciI6Ikp1ZURyZWFtIiwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJhbGwiXSwiYXRpIjoiZmRmMThkODMtNTA1Yi00MjRmLThmNGYtNjVmM2MzOGRlNWU3IiwiZXhwIjoxNjE3NzY0ODAxLCJhdXRob3JpdGllcyI6WyJhZG1pbiJdLCJqdGkiOiJjM2QyNzgwYy05Njg2LTQ0YzMtODc1OS00YTJlNzk1M2ZjMTYiLCJjbGllbnRfaWQiOiJpbnRlcm5ldF9wbHVzIn0.XwJUhyy8MgWBoqWUBVPLNqQxQrS3KDMXW32cCPAf0H8"
                    scope: "all"
                    token_type: "bearer"
                     *  }
                     */
                    console.log(data)
                    if (data.code == "00000") {
                        localStorage.setItem('auth_token', JSON.stringify(data.data));
                        // 获取Token成功
                        window.location.href = '/index';
                    }else{
                        alert("登录失败")
                    }

                }
            });

        }

        //显示隐藏对应的密码输入框:
        $(function(){
            // 通过jqurey修改
            $("#passwordeye").click(function(){
                let type =  $("#password").attr('type')
                if(type === "password"){
                    $("#password").attr("type","text");
                }else{
                    $("#password").attr("type","password");
                }
            });
        });


    </SCRIPT>
</head>
<body>
<img src="img/login_bg.jpg" class="bg">
<div id="head">
    <img src="img/login_head.png" width=100% height=auto />
</div>
<div id="center">
    <form name="myform" onSubmit="return validateform()" enctype="multipart/form-data"  method="post" >
        <div class="input-group">
            <h3>用户名：</h3> <input class="form-control" id="username" name="username" type="text"  style="height:40px" value="" placeholder="只能输入字母或数字，4-16个字符"/>
        </div>
        <div class="input-group">
            <h3>密   码：</h3> <input class="form-control" id="password" name="password" type="password" style="height:40px"  value="" placeholder="密码长度6-12位"/>
            <span class="input-group-btn">
            <input class="btn btn-default" id="passwordeye" type="button" value="show/hide">
        </span>
        </div>

        <div id="btn">
            <input class="btn btn-primary" name="loginButton" type="button" id="login" value="登陆"  onclick="ddLogin()" >
        </div>
    </form>
</div>
<div id="bottom">
    <div class="footer" style="color:white;">
        Copyright © 2013-2021 All Rights Reserved. 备案号：JDY-SD87559
    </div>
</div>
</body>
</html>